<template>
  <div class="app-views">
    <div
      class="item-box"
      v-loading="loading"
      style="border-right: 1px dashed #e6e6e6"
    >
      <div class="sub-title">
        <i
          class="iconfont icon-list"
          style="margin-right: 5px; font-weight: bold"
        ></i>
        <div class="Title">设备列表</div>
      </div>
      <div class="device-list">
        <DCard
          :dName="item.name"
          :isCheck="isCheckCard == item.value"
          @click.native="handlerisCheck(item)"
          v-for="(item, index) in cleanList"
          :key="index"
          :status="deviceList[index]"
          :use="1504"
        />
      </div>
    </div>
    <div class="device-views">
      <div class="sub-title">
        <i class="iconfont icon-shebeituceng-" style="margin-right: 5px"></i>
        <div class="Title">设备图</div>
      </div>
      <div class="device-img">
        <div class="device-img-rec">
          <div class="img-box">
            <img src="@/assets/images/clean.png" alt="" />
          </div>
          <Client
            :isPhoto="true"
            left="38%"
            top="73%"
            :PostionNumber="cameraList[this.isCheckCard + 3]"
          />
          <div class="deviceStatus">
            <div class="title">设备状态</div>
            <div class="list" v-loading="showDeviceStatus.length == 0">
              <div class="item" v-for="item in showDeviceStatus" :key="item.id">
                <!-- <div class="circle">
                  <div :class="item | devicePlcStatus"></div>
                </div> -->
                <div class="descript">
                  <span class="note"> {{ item.note }}</span>
                  <span class="value">
                    {{ item.message }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="signal">
          <div class="sub-title">
            <i
              class="iconfont icon-PLCxinhaoganzhizhongduan"
              style="margin-right: 5px"
            ></i>
            <div class="Title">信号列表</div>
          </div>
          <div class="signal-table">
            <i
              class="iconfont icon-jinyong"
              style="marginright: 5px; fontsize: 30px"
            ></i>
            该设备无plc信号
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <LogView :jobGroup="3" :isShow="isShow" />
    </div>
  </div>
</template>

<script>
import DCard from "@/views/components/production/dCard.vue";
import LogView from "@/views/components/production/logViews.vue";
import Client from "@/views/production/device/components/client.vue";
import { cleanList } from "../Config/label";
import { cleanDB } from "@/config/db";
import mixin from "../mixin/index";
import { cameraList } from "../Config/camera";
export default {
  components: {
    DCard,
    LogView,
    Client,
  },
  mixins: [mixin],
  data() {
    return {
      cameraList,
      cleanList,
      isCheckCard: 0,
      data: [],
      jobGroup: 0,
      loading: false,
      isShow: false,
      device: null,
    };
  },
  methods: {
    loadingImg() {
      let bgImg = new Image();
      bgImg.src = this.imgUrl;
      bgImg.onerror = () => {
        console.log("img onerror");
      };
      bgImg.onload = () => {
        this.loading = false;
      };
    },
    // index 选中的card
    handlerisCheck(item) {
      this.isCheckCard = item.value;
    },
  },
  created() {
    clearInterval(this.timer);
    this.$store.dispatch("listOperationStatus");
    this.getSignal(cleanDB);
  },
  destroyed() {},
  computed: {
    showDeviceStatus() {
      if (this.deviceList.length == 0) return [];
      let blockAddr = [1500];
      let deviceBlock = cleanDB[this.isCheckCard].block;
      return this.deviceList[this.isCheckCard].plcSignals.filter(
        (item) => item.block == deviceBlock && blockAddr.includes(item.addr)
      );
    },
  },
  filters: {
    devicePlcStatus(arg) {
      let arr = ["circle-stop", "circle-forbid", "circle-active"];
      if (arg.message == -1) return arr[0];
      if (arg.message == 0) return arr[2];
      if (arg.message == 1) return arr[0];
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../style/index.less");
img{
  width: 95%;
  height: 350px;
}
.signal {
  flex: 1;
  overflow: hidden;
  .signal-table {
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #e6e6e6;
  }
}
</style>
